<template>
  <div class="order-result">
    <div class="flex-yc">
      <label>商品金额总计：</label>
      <span>¥ 12211.00</span>
    </div>
    <div class="flex-yc">
      <label>运费：</label>
      <span>¥ 12211.00</span>
    </div>
    <div class="flex-yc">
      <label>使用优惠券：</label>
      <span>¥ 12211.00</span>
    </div>
    <div class="flex-yc">
      <label>使用余额：</label>
      <span>¥ 12211.00</span>
    </div>
    <div class="flex-yc">
      <label>优惠活动：</label>
      <span>¥ 12211.00</span>
    </div>

    <div class="money-wrap">
      <div class="flex-yc">
        <label>支付金额：</label>
        <span>¥ 12211.00</span>
      </div>
      <div class="flex-yc">
        <label>实付金额：</label>
        <span class="active">¥ 12211.00</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.order-result {
  padding: 45px 0;
  border-top: 1px solid $borderCol;
  border-bottom: 1px solid $borderCol;

  .flex-yc {
    justify-content: flex-end;
    margin-bottom: 20px;
    line-height: 19px;

    label,
    span {
      font-size: 16px;
    }

    label {
      margin-right: 30px;
      font-weight: 400;
    }

    span {
      font-weight: 500;

      &.active {
        color: $primary;
      }
    }
  }

  .money-wrap {
    margin-top: 45px;

    > .flex-yc {
      label,
      span {
        font-size: 24px;
      }
    }
  }
}
</style>
